<template>
  <div class="home">
    <div style="float: right; margin: 2px 10px 0 0">
      <router-link to="./login">登录账号</router-link>
    </div>
    <handerLogo></handerLogo>
    <van-tabs color="#4e6ef2" type="card" @click="tabClick" animated swipeable>
      <van-tab name="index" title="首页"></van-tab>
      <van-tab name="recentlyUpdate" title="最近更新"></van-tab>
      <van-tab name="ranking" title="排行榜"></van-tab>
    </van-tabs>
    <div>
      <div style="display: flex; margin-right: 10px">
        <div style="flex-direction: column; width: 100%; margin-left: -8px">
          <van-search v-model="search" placeholder="请输入搜索关键词" />
        </div>
        <div
          style="flex-direction: column; margin-top: 10px; margin-left: -10px"
        >
          <van-button
            plain
            color="#4e6ef2"
            type="primary"
            icon="search"
            size="small"
          />
        </div>
      </div>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
import handerLogo from "@/components/handerLogo.vue";
export default {
  components: { handerLogo },
  data() {
    return {
      active: 2,
      search: "",
    };
  },
  methods: {
    tabClick(name) {
      if (name == "index") {
        console.log(name);
        this.$router.replace("/index");
      } else if (name == "recentlyUpdate") {
        this.$router.replace("/recentlyUpdate");
      } else if (name == "ranking") {
        this.$router.replace("/ranking");
      }
    },
  },
};
</script>

<style>
.home {
  margin-top: 10px;
  /* background-color: rgba(255, 0, 51, 0.664); */
  width: 100%;
  height: calc(100%+1px);
}
.content {
  margin: 0 10px;
}
</style>